<template>
    <div class="yorha-radio">
        <input type="radio" ref="radio" :name="name" :value="value">
<!--        <div :class="['box',(flag?'active':'')]"></div>-->
        <div class="text">
            <slot></slot>
        </div>
    </div>
</template>

<script setup>
import {getCurrentInstance, ref} from "vue";

let props = defineProps(['name', 'value'])
let emits = defineEmits(['change'])
let instance = getCurrentInstance()

let flag = ref(false)



</script>

<script>
export default {name:"YorhaRadio"}
</script>

<style lang="less" scoped>
@import "../../style";
.yorha-radio {
    display: inline-block;
    width: auto;
    height: 24px;
    margin-right: 5px;
    position: relative;
    &>input[type=radio] {
        position: relative;
        width: 20px;
        height: 20px;
        //opacity: 0;
        left: 2px;
        top: -2px;
        margin: 0;
    }
    &>.box {
        pointer-events: none;
        display: inline-block;
        width: 20px;
        height: 20px;
        box-sizing: border-box;
        margin: 2px;
        border: 3px @gray solid;
        background: @yellow;
        transition: all 300ms ease-in-out;
        border-radius: 10px;
        &:hover {
            border-width: 10px;
        }
        &.active {
            border-width: 10px;
        }
    }

    &>.text {
        display: inline-block;
        //margin-top: 3px;
        color: @gray;
        font-size: 18px;
        position: relative;
        margin-left: 4px;
        bottom: 5px;
    }
}
</style>